<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
		<style type="text/css">
			#diagramContainer {
				padding: 20px;
				width: 100%;
				height: 400px;
				border: 1px solid gray;
			}

			.item {
				position: absolute;
				height: 80px;
				width: 80px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<div id="diagramContainer">
			<div id="item_left" class="item"></div>
			<div id="item_right" class="item" style="left:150px;"></div>
			<div id="item_3" class="item" style="left:250px;"></div>
		</div>
	</body>
</html>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

<script>
	/* global jsPlumb */
	jsPlumb.ready(function() {

		jsPlumb.setContainer('diagramContainer')

		var common = {
			isSource: true,
			isTarget: true,
			connector: ['Flowchart'],
			paintStyle: {
				fill: 'white',
				outlineStroke: 'blue',
				strokeWidth: 1
			},
			maxConnections: -1

		}

		jsPlumb.addEndpoint('item_left', {
			anchors: ['Right']
		}, common)

		jsPlumb.addEndpoint('item_right', {
			anchor: 'Left'
		}, common)

		jsPlumb.addEndpoint('item_right', {
			anchor: 'Right'
		}, common)
		
		jsPlumb.addEndpoint('item_3', {
			anchor: 'Right'
		}, common)
		jsPlumb.addEndpoint('item_3', {
			anchor: 'Top'
		}, common)
		jsPlumb.addEndpoint('item_3', {
			anchor: 'Bottom'
		}, common)
		jsPlumb.addEndpoint('item_3', {
			anchor: 'Left'
		}, common)


		jsPlumb.draggable('item_left')
		jsPlumb.draggable('item_right')
		jsPlumb.draggable('item_3')

		jsPlumb.importDefaults({
			ConnectionsDetachable: false
		})
	})
//监控尺寸变化
		// $('.item').resizable({
		// 	resize: function(event, ui) {
		// 		jsPlumb.repaint(ui.helper)
		// 	}
		// })
		//点击删除
		jsPlumb.bind('click', function (conn, originalEvent) {
		  if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
		    jsPlumb.detach(conn)
		  }
		})

</script>
